<template>
	<view class="operation">
		<view class="main">
			<view class="opts-item user-img-item">
				<view class="title">
					头像
				</view>
				<view class="icon">
					<image :src="profile.userImage" @tap="uploadUserImage" mode="">
					</image>
				</view>
			</view>
			<view class="opts-item" @click="openDeilag('username')">
				<view class="title">
					用户名
				</view>
				<view class="icon">
					<view class="text">
						{{ profile.username }}
					</view>
				</view>
			</view>
			<view class="opts-item" @click="toUIpdateMobile">
				<view class="title">
					手机号
				</view>
				<view class="icon">
					<view class="text">
						13214312341
					</view>
				</view>
			</view>
			<view class="opts-item none-item"></view>
			
			
		</view>

		<!-- 对话框 -->
	<!-- 	<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" :title='title' :duration="2000" v-model="data"
				:before-close="true" @close="closeDeilag" @confirm="submitDeilag"></uni-popup-dialog>
		</uni-popup> -->
		<!-- 头像上传 -->
		<uni-file-picker ref="files" :auto-upload="false" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				inputTitle: '请输入',
				title: '标题',
				types: '', // 键
				data: '', // 值
				tempFilePath: '', // 头像
				tempFilePath: '', // 临时文件路径
				profile:{}
			}
		},
		methods: {
			// 修改手机号
			toUIpdateMobile() {
				
			},
			// 打开对话框  用户名|真实姓名|
			openDeilag(types) {
				switch (types) {
					case 'username':
						this.title = '用户名'
						this.data = this.profile.username
						break;
					case 'realName':
						this.title = '真实姓名'
						this.data = this.profile.realName
						break;
					case 'code':
						this.title = '学生号'
						this.data = this.profile.code
						break;
					default:
						return;
				}
				this.types = types
				this.$refs.inputDialog.open()
			},
			// 点击取消
			closeDeilag() {
				this.data = ''
				this.title = '标题'
				this.$refs.inputDialog.close()
			},
			// 点击确认
			submitDeilag(value) {
				// 修改
				
				// 关闭
				this.$refs.inputDialog.close()
			},

			// 修改头像
			// 头像裁剪上传
			uploadUserImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", 'camera'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift();
					},
				});
			},
			confirm(e) {
				this.tempFilePath = "";
				this.cropFilePath = e.detail.tempFilePath;
				// console.log(this.cropFilePath)
			
			},
			
			// 
			cancel() {
				console.log("canceled");
				this.tempFilePath = "";
			}

		}
	}
</script>

<style lang="less">
	.operation {
		min-height: 100vh;
		width: 100%;
		background: #f4f4f4;

		.main {
			width: calc(100% - 64rpx);
			padding: 10rpx 32rpx;
			padding-top: calc(30rpx - var(--status-bar-height));
			display: flex;
			flex-direction: column;

			// 默认 用户文字信息
			.opts-item {
				padding: 20rpx 0;
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				border-bottom: #f4f4f4 solid 2rpx;

				.title {
					padding-left: 20rpx;
				}

				.icon {
					padding-right: 40rpx;

					.text {
						color: #808080;
					}
				}
			}

			// 空
			.none-item {
				height: 20rpx;
				background: #f4f4f4;
			}

			// 用户头像
			.user-img-item {
				height: 80rpx;

				.icon {
					width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						border-radius: 50%;
						width: 76rpx;
						height: 76rpx;
					}
				}
			}
		}
	}
</style>
